﻿<!DOCTYPE html>
<!-- Copyright © Microsoft Corporation. All rights reserved. -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Internet Explorer Developer Sample</title>
    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
    <script type="text/javascript" src="script/base-sdk.js"></script>
</head>
<body role="application">
    <div id="header" role="contentinfo"></div>

    <h1 id="sampleTitle">Form controls</h1>
    <h2>Scenario 1: <a href="scenario1.html">Button</a></h2>
    <p>
        This code demonstrates basic syntax and styling of the submit button, reset button,
        and standard button controls.
    </p>
    <h2>Scenario 2: <a href="scenario2.html">Checkbox</a></h2>
    <p>
        This code demonstrates basic syntax and styling of the checkbox control using
        its checked, unchecked, and indeterminate states.
    </p>
    <h2>Scenario 3: <a href="scenario3.html">Radio button</a></h2>
    <p>
        This code demonstrates basic syntax and styling of the radio button control.
    </p>
    <h2>Scenario 4: <a href="scenario4.html">Text input</a></h2>
    <p>
        This code demonstrates basic syntax and styling of different types of text
        input controls, including email, number, and URL. The 'contentEditable' and
        'spellcheck' attributes are also shown.
    </p>
    <h2>Scenario 5: <a href="scenario5.html">Select</a></h2>
    <p>
        This code demonstrates basic syntax and styling of the select control as a
        simple drop-down list, a scrollable drop-down list, and a multi-line single
        select list box.
    </p>
    <h2>Scenario 6: <a href="scenario6.html">File upload</a></h2>
    <p>
        This code demonstrates basic syntax of the file upload control.
        The 'accept' and 'multiple' attributes are also shown.
    </p>
    <h2>Scenario 7: <a href="scenario7.html">Range</a></h2>
    <p>
        This code demonstrates several examples using the range control, including
        its basic syntax and styling, its use in a video seek bar scenario, its use
        in a multi-touch equalizer example, and its use as a Bing Maps zoom level
        control scenario.
    </p>
    <h2>Scenario 8: <a href="scenario8.html">Progress</a></h2>
    <p>
        This code demonstrates the basic syntax and styling of the progress control,
        as well as an example of how it might be used to monitor a file download.
    </p>
    <h2>Scenario 9: <a href="scenario9.html">Form layout</a></h2>
    <p>
        This example shows a recommended way to layout form control margins and
        reading order for a two column form.
    </p>

    <div class="seeAlsoRegion" role="region" aria-labelledby="seeAlsoLabel" aria-live="assertive">
        <h3 id="seeAlsoLabel">See also</h3>
        <div class="seeAlsoContent">
            <h4>Reference</h4>
            <p>
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/ms535260(v=vs.85).aspx">input element</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772953(v=vs.85).aspx">progress element</a>
            </p>
            <h4>Conceptual</h4>
            <p>
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx">Internet Explorer 10 Developer Guide: HTML5 Forms</a>
            </p>
            <h4>Internet Explorer Test Drive</h4>
            <p>
                <a target="_blank" href="http://ie.microsoft.com/testdrive/Browser/TouchFirstControls/Default.html">Touch First Controls</a>
            </p>
            <h4>IEBlog</h4>
            <p>
                <a target="_blank" href="http://blogs.msdn.com/b/ie/archive/2012/04/20/guidelines-for-building-touch-friendly-sites.aspx">Guidelines for Building Touch-friendly Sites</a>
            </p>
            <h4>Internet Explorer Testing Center</h4>
            <p>
                <a target="_blank" href="http://samples.msdn.microsoft.com/ietestcenter/#html5Forms ">HTML5 Forms</a>
            </p>
            <h4>Windows app samples</h4>
            <p>
                <a target="_blank" href="http://code.msdn.microsoft.com/windowsapps/Common-HTML-controls-and-09a72a24">HTML essential controls sample</a>
            </p>
        </div>
    </div>

    <div id="footer" role="contentinfo"></div>
</body>
</html>